<template>
  <div class="dashboard">
    <div class="head">
      <h1>综合能源智慧计量管控平台</h1>
      <div class="head-right">
        <span id="showTime">{{timeText}}</span>
        <el-tooltip content="退出大屏">
          <el-button class="d2-mr btn-text can-hover" type="text" @click="exitDashboard">
            <d2-icon name="power-off" />
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <div class="main">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="box" style="height: 220px">
            <div class="box-title">用量信息</div>
            <div class="box-content" style="line-height: 50px;">
              <el-row :gutter="40">
                <el-col :span="12">今日用水量: 11</el-col>
                <el-col :span="12">本周用水量: 22</el-col>
              </el-row>
              <el-row :gutter="40">
                <el-col :span="12">本月用水量: 66</el-col>
                <el-col :span="12">本年用水量: 99</el-col>
              </el-row>
            </div>
            <div class="boxfoot"></div>
          </div>
          <div class="box" style="height: 260px">
            <div class="box-title">区域用量</div>
            <div class="box-content">
              <el-table :data="areaUsage" size="mini" height="180px" :border="false">
                <el-table-column prop="area" label="区域"></el-table-column>
                <el-table-column prop="count" label="安装数量"></el-table-column>
                <el-table-column prop="usage" label="本月用量"></el-table-column>
              </el-table>
            </div>
            <div class="boxfoot"></div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="box" style="height: 500px;padding: 2px">
            <div class="box-content" style="height: 100%">
              <video
                style="width: 100%;height: 100%;object-fit: cover;"
                autoplay="autoplay"
                loop="loop"
                muted="muted"
                src="./image/video.mp4"
              ></video>
            </div>
            <div class="boxfoot"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="box" style="height: 430px;margin-bottom: 0">
            <div class="box-title">区域概览</div>
            <ve-pie
              :data="chartData"
              :settings="chartSetting"
              height="350px"
              :legend="{show: false}"
            />
            <div class="boxfoot"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box" style="height: 430px;margin-bottom: 0">
            <div class="box-title">同比用量</div>
            <ve-bar
              :data="chartData2"
              :setting="chartSetting2"
              :textStyle="{color: '#fff'}"
              :legend="{show: false}"
              height="350px"
              :grid="{top: 20, bottom: 20,right:20}"
            ></ve-bar>
            <div class="boxfoot"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box" style="height: 430px;margin-bottom:0;padding: 2px;">
            <div class="box-title absolute">区域设备</div>
            <ve-bmap
              class
              height="100%"
              :settings="mapChartSetting"
              :series="mapChartData"
              :tooltip="{show:true}"
            ></ve-bmap>
            <div class="boxfoot"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import VePie from "v-charts/lib/pie";
import VeBar from "v-charts/lib/bar";
import VeBmap from "v-charts/lib/bmap";
export default {
  name: "dashboard",
  components: {
    VePie,
    VeBar,
    VeBmap
  },
  data() {
    return {
      timer: null,
      timeText: "",
      areaUsage: [
        { area: "梁溪区", count: 334, usage: 2321 },
        { area: "滨湖区", count: 334, usage: 2321 },
        { area: "新吴区", count: 334, usage: 2321 },
        { area: "锡山区", count: 334, usage: 2321 },
        { area: "新吴区", count: 334, usage: 2321 },
        { area: "新吴区", count: 334, usage: 2321 },
        { area: "新吴区", count: 334, usage: 2321 }
      ],
      chartSetting: {
        offsetY: "50%"
      },
      chartData: {
        columns: ["area", "cost", "profit"],
        rows: [
          { area: "梁溪区", cost: 123, profit: 3 },
          { area: "滨湖区", cost: 1223, profit: 6 },
          { area: "新吴区", cost: 2123, profit: 90 },
          { area: "锡山区", cost: 4123, profit: 12 }
        ]
      },
      chartData2: {
        columns: ["date", "cost", "profit"],
        rows: [
          { date: "01/01", cost: 123, profit: 3 },
          { date: "01/02", cost: 1223, profit: 6 },
          { date: "01/03", cost: 2123, profit: 90 },
          { date: "01/04", cost: 4123, profit: 12 },
          { date: "01/05", cost: 3123, profit: 15 },
          { date: "01/06", cost: 7123, profit: 20 }
        ]
      },
      chartSetting2: {
        label: {
          color: "white"
        }
      },
      mapChartSetting: {
        key: "waOmHmK1P6Dqc6IGDeVFGWCIk9fQGQXZ",
        bmap: {
          center: [120, 30],
          zoom: 14,
          roam: true,
          mapStyle: { style: "midnight" }
        }
      },
      mapChartData: [
        {
          type: "scatter",
          coordinateSystem: "bmap",
          data: [
            [120, 30, 1] // 经度，维度，value，...
          ]
        }
      ]
    };
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      clearTimeout(this.timer); //清除定时器
      let dt = new Date();
      let y = dt.getFullYear();
      let mt = dt.getMonth() + 1;
      let day = dt.getDate();
      let h = dt.getHours(); //获取时
      let m = dt.getMinutes(); //获取分
      let s = dt.getSeconds(); //获取秒
      this.timeText =
        y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
      this.timer = setTimeout(this.startTimer, 1000); //设定定时器，循环运行
    },
    exitDashboard() {
      this.$router.push("/");
    }
  }
};
</script>

<style lang="scss">
.dashboard {
  background: #000d4a url(./image/bg.jpg) center center;
  background-size: cover;
  color: #666;
  width: 100%;
  min-height: 100%;

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  ::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
  }
  ::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgba(250, 250, 250, 0.2);
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #78ebff;
  }

  .head {
    height: 105px;
    background: url(./image/head_bg.png) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    z-index: 100;
  }

  .head h1 {
    color: #fff;
    text-align: center;
    font-size: 40px;
    line-height: 80px;
  }

  .head h1 img {
    width: 150px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
  }

  .head-right {
    position: absolute;
    right: 30px;
    top: 0;
    line-height: 75px;
  }

  .head-right img {
    width: 0.37px;
    display: inline-block;
    vertical-align: middle;
  }

  .head-right span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    padding-right: 10px;
  }

  .main {
    padding: 10px;

    .box {
      border: 1px solid rgba(25, 186, 139, 0.17);
      padding: 20px 40px 15px;
      background: rgba(255, 255, 255, 0.04);
      background-size: 100% auto;
      position: relative;
      margin-bottom: 20px;
      z-index: 10;
      color: #fff;
      font-size: 20px;
      &:before,
      &:after {
        position: absolute;
        width: 10px;
        height: 10px;
        content: "";
        border-top: 2px solid #02a6b5;
        top: 0;
      }
      &-title {
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 50px;
        &.absolute {
          position: absolute;
          top: 20px;
          z-index: 1;
          text-align: center;
          left: 0;
          right: 0;
        }
      }
      &-content {
        .el-table {
          color: #fff;
          background: transparent;
          &:before {
            display: none;
          }
          .el-table__body tr:hover > td {
            background: transparent;
          }
          thead {
            color: #fff;
          }
          th,
          tr,
          td {
            background: transparent;
            border: none;
          }
        }
      }
    }
    .box:before,
    .boxfoot:before {
      border-left: 2px solid #02a6b5;
      left: 0;
    }
    .box:after,
    .boxfoot:after {
      border-right: 2px solid #02a6b5;
      right: 0;
    }
  }
  .boxfoot {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    &:before,
    &:after {
      position: absolute;
      width: 10px;
      height: 10px;
      content: "";
      border-bottom: 2px solid #02a6b5;
      bottom: 0;
    }
  }

  .ve-bmap {
    opacity: 0.7;
  }
  .anchorBL {
    display: none;
  }
}
</style>
